<template>
    <div class="wh-100 px-12 overflow-auto pb-60" style="background-color: #f0f1f3">
        <!--头部-->
        <div class="w-100 d-flex-between-center px-12 fs-16 h_60p">
            <span style="color: #5b5b5b;" class="fw-6">{{ chapterContentList.title }}</span>
            <div class="cursor-pointer d-flex-around-center fs-12 w_60p h_25p b_1_d1d1d1 b_r_5" style="background-color: white" @click="$router.back()">
                返回
            </div>
        </div>
        <!--职位概览-->
        <div class="w-100 b_r_10 h_350p b_1_d1d1d1 " style="background-color: white" v-loading="boxloading1">
            <div class="w-100 px-24 d-flex-between-center b_b_1_d1d1d1 h_40p lh_40p fs-6 fw-6 ">
                <div class="fs-16">简章内容</div>
                <span style="color: rgba(160, 160, 160);" class="fs-14">发布人：{{ chapterContentList.pshPerson }} 发布时间：{{ chapterContentList.pshTime }}</span>
            </div>
            <div class="w-100" style="height: calc(100% - 50px)">
                <div class="wh-100 pt-20 px-28">
                    <div>
                        <div class="fs-14 mb-12" style="color: #4f4f4f">简章标题：{{ chapterContentList.title }}</div>
                        <div class="fs-14 mb-12" style="color: #4f4f4f">招聘单位：{{ chapterContentList.enterpriseName }}</div>
                        <div class="fs-14 mb-12" style="color: #4f4f4f">招聘到期时间：{{ chapterContentList.recEndTime }}</div>
                        <!--                        <div class="fs-14" style="color: #4f4f4f;font-weight: bold" >是否置顶：{{chapterContentList.isTop == 'true'?'是':'否'}} </div>-->
                    </div>
                </div>
            </div>
        </div>
        <!--职位描述-->
        <div class="w-100 mt-12 h_350p b_1_d1d1d1 b_r_10" style="background-color: white" v-loading="boxloading2">
            <div class="w-100 px-24 b_b_1_d1d1d1 h_40p fs-16 fw-6 lh_40p">简章详情</div>
            <div class="w-100 h_100-50p pt-8" style="overflow:scroll">
                <div class="wh-100 py-20 px-28 overflow-auto">
                    <div class="fs-14">{{ jobDescription }}</div>
                </div>
            </div>
        </div>
        <!--审核情况-->
        <div class="w-100 mt-8 pb-12 b_1_d1d1d1 b_r_10" style="background-color: white" v-loading="boxloading3">
            <div class="px-28 h_40p lh_40p fs-16 fw-6 b_b_1_e5e5e5">审核情况</div>
            <div class="mt-12 fs-16 px-28">
                <div>证明材料</div>
                <div class="d-flex my-12">
                    <el-image class="ml-12 mr-28 h_200p w_200p" :src="auditList.enterpriseSupportingMaterial" alt="单位证件" :preview-src-list="[auditList.enterpriseSupportingMaterial]">
                        <div slot="error" class="image-slot fs-12 d-flex-around-center h_200p w_200p" style="background-color: #f5f7fa">
                            <i class="el-icon-picture-outline">单位证件</i>
                        </div>
                    </el-image>
                    <el-image :src="auditList.attnSupportingMaterial" alt="经办人证件" class="mr-28 h_200p w_200p" :preview-src-list="[auditList.attnSupportingMaterial]">
                        <div slot="error" class="image-slot fs-12 d-flex-around-center h_200p w_200p" style="background-color: #f5f7fa">
                            <i class="el-icon-picture-outline">经办人证件</i>
                        </div>
                    </el-image>
                    <el-image :src="auditList.letters" alt="公函" class="mr-28 h_200p w_200p" :preview-src-list="[auditList.letters]">
                        <div slot="error" class="image-slot fs-12 d-flex-around-center h_200p w_200p" style=" background-color: #f5f7fa">
                            <i class="el-icon-picture-outline">公函</i>
                        </div>
                    </el-image>
                    <!--                    <img :src=auditList.enterpriseSupportingMaterial alt="单位证件" style="height: 100px;width: 100px">-->
                    <!--                    <img :src=auditList.attnSupportingMaterial alt="经办人证件" class="ml-28"  style="height: 100px;width: 100px">-->
                    <!--                    <img :src=auditList.letters alt="公函" class="ml-28"  style="height: 100px;width: 100px">-->
                </div>
                <div class="mt-12 fs-14 d-flex flex-column">
                    <div class="my-12">
                        <span class="mr-12">当前状态：</span>
                        <span v-if="auditList.recruitReviewStatus == 0" style="color: blue">待审核</span>
                        <span v-else-if="auditList.recruitReviewStatus == 1" style="color: green">审核通过</span>
                        <span v-else-if="auditList.recruitReviewStatus == 2" style="color: red">审核不通过</span>
                        <span v-else>暂无数据</span>
                    </div>
                    <div>
                        <div>
                            <span class="mr-12">审核人员：</span>
                            <span>{{ auditList.recruitAuditPerson ? auditList.recruitAuditPerson : '暂无数据' }}</span>
                        </div>
                    </div>
                </div>
                <!--                <div class="mt-12 " v-show="auditList.recruitReviewStatus == 0">-->
                <div class="mt-12">
                    <div>
                        <span class="fs-14 mr-12">审核选择</span>
                        <el-radio-group v-model="isPass">
                            <el-radio :label="true">通过</el-radio>
                            <el-radio :label="false">不通过</el-radio>
                        </el-radio-group>
                    </div>
                    <div>
                        <Input v-if="isPass === false" class="w_300p m_l_70p m_t_12p" maxlength="200" show-word-limit v-model="auditFail" type="textarea" :rows="4" placeholder="输入不通过的原因" />
                        <Button type="primary" class="w_100p m_l_70p m_t_12p h_30p" style="display: block" @click="submit" :loading="buttonLoading">提交</Button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getContentDetailsAPI, getDetailsAPI, getStatusDetailsAPI, submitForReviewAPI } from '../../../api/bys/recruitmentManagement';
export default {
    data() {
        return {
            boxloading1: false,
            boxloading2: false,
            boxloading3: false,
            schoolId: '',
            isShow: true,
            status: '',
            reason: '',
            jobDescription: '',
            generalRegulationsID: '',
            buttonLoading: false,
            chapterContentList: {},
            auditList: {
                enterpriseSupportingMaterial: '../../../assets/no-open.png',
                attnSupportingMaterial: '../../../assets/no-open.png',
                recruitReviewStatus: '',
                recruitAuditPerson: '',
                letters: '../../../assets/no-open.png'
            },
            isPass: true,
            auditFail: ''
        };
    },
    computed: {
        isTop() {
            if (this.chapterContentList.isTop === '0') {
                return '置顶';
            }
            if (this.chapterContentList.isTop === '1') {
                return '未置顶';
            }
        }
    },
    mounted() {
        this.getListA();
        this.getListB();
        this.getListC();
    },
    created() {
        this.isShow = this.$route.query.isShow;
        this.generalRegulationsID = this.$route.query.id;
        // this.schoolId = this.$route.query.schoolId
        console.log(this.isShow);
    },

    methods: {
        getListA() {
            this.boxloading2 = true;
            getDetailsAPI({
                brochureId: this.generalRegulationsID
            })
                .then(res => {
                    if (res.success) {
                        this.boxloading2 = false;
                        this.jobDescription = res?.result || '暂无数据';
                        console.log(this.jobDescription, '审核情况');
                    } else {
                        this.boxloading2 = false;
                    }
                })
                .catch(err => {
                    this.boxloading2 = false;
                });
        },
        getListB() {
            this.boxloading3 = true;
            getStatusDetailsAPI({
                brochureId: this.generalRegulationsID
            })
                .then(res => {
                    if (res.success) {
                        this.boxloading3 = false;
                        if (res.result) {
                            this.auditList = res?.result || '';
                            console.log(this.auditList, '证件');
                        } else {
                            this.boxloading3 = false;
                            this.auditList.enterpriseSupportingMaterial = '';
                            this.auditList.attnSupportingMaterial = '';
                            this.auditList.letters = '';
                            this.auditList.recruitAuditPerson = '暂无数据';
                        }
                    } else {
                        this.boxloading3 = false;
                        this.auditList = '';
                    }
                })
                .catch(err => {
                    this.boxloading3 = false;
                });
        },
        getListC() {
            this.boxloading1 = true;
            getContentDetailsAPI({
                // schoolId:this.schoolId,
                brochureId: this.generalRegulationsID
            })
                .then(res => {
                    if (res.success) {
                        this.boxloading1 = false;
                        this.chapterContentList = res?.result || '';
                        console.log(this.chapterContentList, '简章内容');
                    } else {
                        this.chapterContentList = '';
                        this.boxloading1 = false;
                    }
                })
                .catch(err => {
                    this.boxloading1 = false;
                });
        },
        submit() {
            this.buttonLoading = true;
            submitForReviewAPI({
                brochureId: this.generalRegulationsID,
                isPass: this.isPass,
                auditFail: this.auditFail
            }).then(res => {
                if (res.success) {
                    console.log('通过成功');
                    this.buttonLoading = false;
                    this.$message({
                        message: '审核提交成功！',
                        type: 'success'
                    });
                    this.$router.back(); //返回主页面
                }
            });
        }
    }
};
</script>
<style scoped>
.job-overview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 10px;
}

.job-description div:not(:first-child) {
    margin-top: 12px;
}

.audit-status {
    font-size: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 20px;
}
</style>
